<template>
    <div>
        <el-button
                size="mini"
                type="primary"
                @click="add">添加
        </el-button>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="余额">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="editEmp(scope.row)">修改</el-button>
                    <el-button type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--添加-->
        <div>
            <el-dialog
                    title="添加用户"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form ref="userFrm" :model="addForm" label-width="80px">
                    <el-form-item label="编号" prop="id">
                        <el-input v-model="addForm.id"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="余额" prop="money">
                        <el-input v-model="addForm.money"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="insetqd">确 定</el-button>
        </span>
            </el-dialog>
        </div>

        <!--修改-->
        <div>
            <el-dialog
                    title="修改用户"
                    :visible.sync="dialogVisible2"
                    width="30%"
                    >
                <el-form ref="userFrm" :model="updateForm" label-width="80px">
                    <el-form-item label="昵称" prop="name">
                        <el-input v-model="updateForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="余额" prop="money">
                        <el-input v-model="updateForm.money"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateqd">确 定</el-button>
        </span>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    export default {
        name: "UserAll",
        data() {
            return {
                tableData: [],
                addForm: {},
                dialogVisible: false,
                updateForm: {},
                dialogVisible2: false,
                //当前显示的页码
                current: 1,
                //总条数
                total: 0,
                //每页显示的条数
                pageSize: 5,
            }
        },
        created() {
            this.initTable();
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.initTable();

            },
            handleCurrentChange(val) {
                this.current = val
                this.initTable();

            },
            initTable() {
                this.$http.get("http://localhost:8888/user/lists?current="+this.current+"&pageSize"+"="+this.pageSize).then(resp => {
                    console.log(resp)
                    this.total = resp.data.data.total;
                    if (resp.data.code === 2000) {
                        this.tableData = resp.data.data.records;
                    }
                })
            },

            add() {
                this.dialogVisible = true;
            },
            insetqd() {
                this.$http.post("http://localhost:8888/user/add", this.addForm).then(resp => {
                    if (resp.data.code === 2000) {
                        this.$message.success("添加成功");
                        this.dialogVisible = false;
                        this.addForm={}
                        this.initTable()
                    }
                })
            },

            editEmp(row) {
                this.dialogVisible2 = true;
                this.updateForm = row;
            },
            updateqd() {
                this.$http.put("http://localhost:8888/user/update", this.updateForm).then(resp => {
                    if (resp.data.code === 2000) {
                        this.$message.success("修改成功");
                        this.dialogVisible2 = false;
                        this.initTable();
                    }
                })
            },

            del(row) {
                console.log(row)
                this.$http.delete("http://localhost:8888/user/delete?id=" + row.id).then(resp => {
                    if (resp.data.code === 2000) {
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            }


        }
    }
</script>

<style scoped>

</style>